import React, { useEffect, useState,useRef } from 'react';
import '../assets/css/administrator.css';
import {
  Card,
  Button,
  Table,
  Form,
  Input,
  Modal,
  message,
  Pagination
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { administrator, administratordel } from '../apis/administrator';
import { useNavigate } from 'react-router-dom'
import Administratoradd from "../components/AdministratorAdd/Administratoradd"
// 约束类型
interface Params {
  id:string,
  key: string;
  page: number;
  psize: number;
}
// 分页
var total = 0
const Administrator: React.FC = () => {
  const navigate = useNavigate();
  // 表格
  const columns: ColumnsType<any> = [
    {
      title: 'id',
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: '登录账号',
      dataIndex: 'username',
      align: 'center',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '手机号',
      dataIndex: 'tel',
      align: 'center',
    },
    {
      title: '类型',
      dataIndex: 'typeName',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'id',
      align: 'center',
      render: (row) => (
        <div>
          <Button
            style={{
              background: '#67c23a',
              color: '#ffffff',
              marginRight: '5px',
            }}
            onClick={upd(row)}
          >
            修改
          </Button>
          <Button onClick={()=>del(row)} style={{background:'#f56c6c',color:'#ffffff',marginRight:'5px'}}>删除</Button>
        </div>
      ),
    },
  ];
  const [list, setList] = useState<any>([]);
  const [params, setParams] = useState<Params>({
    id:'',
    page: 1,
    psize: 20,
    key: '',
  });
  useEffect(() => {
    getList();
  }, [params]);

  // 列表数据
  const getList = async () => {
    const res: any = await administrator(params);
    console.log(res);
    if (res.errCode === 10000) {
      setList(res.data.list);
      total = res.data.counts
    }
  };
  // 查询
  const onSearchFinish = (values: any) => {
    console.log(values);
    setParams({ ...params, ...values });
    console.log(params);
  };
  // 单删
  const del = (id:any)=>{
    console.log(id);
    Modal.confirm({
      title:'是否删除此条数据？',
      content:'请谨慎操作',
      okText:'确认',
      cancelText:'取消',
      async onOk(){
        const res: any = await administratordel({ id: id });
        console.log(res);
        if (res.errCode === 10000) {
          getList();
          message.success('删除成功');
        }
      },
      onCancel(){
        message.error('删除失败');

      }
    })
  }

  // 多选框
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  // 添加
  const [addShow,getAddShow] = useState(false)
  const getUserClose = ()=>{
    getList()
  }
  // 修改  
  const upd = (id:number) => {
    return()=>{
      console.log(id);
    }
  };
  // 分页
  const ange = (a: any, b: any) => {
    console.log(a, b);
    setParams({ ...params, page: a, psize: b })
  }

  return (
    <div id="administrator">
      <Card className="card" title={<a href="#">管理员列表</a>}>
        <Form layout="inline" onFinish={onSearchFinish} className="seach">
          <Form.Item label="关键字" name="key">
            <Input placeholder="关键字" />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" type="primary">
              查询
            </Button>
          </Form.Item>
        </Form>
        <div className="add">
          <Administratoradd
            addShow={addShow}
            getUserClose={getUserClose}
          ></Administratoradd>
        </div>
        <div className="tab">
          <Table
            rowKey="id"
            bordered
            rowSelection={rowSelection}
            columns={columns}
            dataSource={list}
            pagination={false}
          />
        </div>
        <div className="page" style={{textAlign:'center',marginTop:'30px'}}>
          <Pagination
            total={total}
            onChange={ange}
            showSizeChanger
            showQuickJumper
            showTotal={total => `共 ${total} 条数据`}
          />
        </div>
      </Card>
    </div>
  );
};

export default Administrator;
